<!DOCTYPE html>
<html lang="zh-cn">
<head lang="en">
<link rel="stylesheet" media='all' href="vendors/bootstrap/css/bootstrap.min.css">
<link rel='stylesheet' media='all' href="vendors/share.js/css/share.min.css"/>

<link rel='stylesheet' media='all' href="theme/default/css/style.css"/>
<link rel='stylesheet' media='all' href="theme/default/css/editor.css"/>
<link rel='stylesheet' media='all' href="css/plugins.css"/>

<link rel='stylesheet' media='all' href="vendors/simple-line-icons/css/simple-line-icons.css"/>
<link rel='stylesheet' media='all' href="vendors/font-awesome/css/font-awesome.min.css"/>
<link rel='stylesheet' media='all' href="vendors/pace/themes/pace-theme-minimal.css"/>

<link rel="stylesheet" media="all" href="vendors/highlight/styles/github.css"/>
<link rel="stylesheet" href="vendors/share.js/css/share.min.css">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src='js/jquery.base64.js'></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/json_parse.js"></script>
	<script type="text/javascript" src="vendors/share.js/js/social-share.js"></script>
	<script type="text/javascript" src="js/clipboard.min.js"></script>
	<script type="text/javascript" src="js/qrcode.js"></script>
    <title>demo</title>
    <style>
        body{background-color: #f5f5f5;padding: 0;margin: 0}
        .head{height: 3.2em;min-width: 300px;background-color:#00D6DE}
        .head .head_return,.head_login{line-height: 3.2em;width: 100%; color: #ffffff}
        .head .head_return, .head_login {float: left}
        .head_return span {padding-left: 28px}
        .head_return img{width: 23px;vertical-align: text-top;position: absolute;top: .9em; padding-left: 10px}
        .head_login span{display: block; font-size: 22px; font-weight: normal; text-align: center}

        .middle{height: 6.6em;width: 100%;min-width: 300px;background-color: #ffffff}
        .middle span{font-size:18px;color: #5D5D5D; margin-right: 5px; margin-left: 10px}
        .middle .md_code span{letter-spacing:8px}
        .middle input{border:none;height: 2.7em;border-radius:8px; padding-left: 8px; font-size: 18px}
        .middle input, button{outline:0 none !important; blr:expression(this.onFocus=this.blur())}
        .middle .md_phone{margin-top: 10px}
        .middle .md_phone input{width: 60% }
        .middle .md_code input{width: 30%;padding-top: 5px;}
        .middle .md_line{ margin:0 auto; border-bottom:1px solid #ccc; width:95%}
        .middle .md_btn{border: 1px solid #ffffff; margin-top: 10px; background-color:#00D6DE;  height: 2.4em;
            color: #ffffff; font-size: 16px;border-radius: 30px;width: 37%;  margin-left: 13px;position:absolute; min-width: 124px; max-width: 180px}

        .bootom{height: 3.2em;width: 100%;min-width: 300px; margin-top: 1.5em}
        .bootom .bot_save{width: 40%; text-align: center; background-color:#FF5701;height: 2.8em; margin-left: 5%; border-radius: 7px;float: left}
        .bootom .bot_next{width: 40%; text-align: center; background-color: #b9b9b9;height: 2.8em; margin-left: 5%; border-radius: 7px;float:left;}
        .bootom .bot_save span,.bot_next span{line-height: 2.2em; font-size: 21px; font-family: Arial;font-weight: 100; color: #ffffff}

        .mask_layer{ position: absolute; display: none; top: 0; left: 0;  width: 100%; height: 100%;background-color: #5D5D5D; opacity: 0.7;overflow:scroll;overflow-x:hidden;z-index: 10;}
        .mask_layer .mask_remind {position: relative;top:-8px;text-align: center;z-index: 15;color: #ffffff;}
        .mask_layer .mask_remind span{ }
        .mask_layer .mask_ref img {  position: relative; float: initial;  margin-top: 76%;  margin-left: 43%;  width: 40px; animation:circle 1.6s infinite linear; -webkit-animation: circle 1.2s infinite linear;}
        @keyframes circle {
            0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
            100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
        }
        @-webkit-keyframes circle {
            0% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
            100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
        }
    </style>
</head>

<body>
<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">  
<img src="https://hlbibi.oss-cn-shenzhen.aliyuncs.com/cardpack/2.png" height="100%" width="100%"/>  
</div>
<div id="pop_note" class="modal-dialog" role="document" style="margin-top: 30%; margin-bottom: 30%; margin-left: 10%; margin-right: 10%; position: fixed; z-index: 10; display: none; width: 80%; height: 40%">
    <div class="modal-content">
        <h4 class="modal-title" style="margin-top: 3px; text-align: center; font-size: 1.2em; font-weight: bold;">复制内容提示</h4>
        <br>
        <div class="modal-body">
                <div id="copy_contents_prefix" class="form-group "></div>
                <div id="copy_contents" class="form-group "></div>
                <button id="btn_close" class="btn btn-success btn-block btn-sm" type="button">
                    我知道了
                </button>
        </div>
    </div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
<div style="position:absolute;bottom:2.5rem;left:20%;right:20%;">

        <div id="share_block" style="display: none">
            <div id="share"></div>
            <div id="bt_copy" class="js-copy" style="display: none;text-align: center; ">
                <a class="copy btn btn-primary btn-block btn-sm">复制链接去分享</a>
        </div>
    </div>
    <div id="qrcode_top" style="font-size:large; font-weight:bold; text-align: center; width:100%; margin-top:15px;">授权请求二维码</div>
    <div style="margin: auto; width:200px; height:200px; margin-top:15px;">
            <a href="" id="qrcode"></a>
    </div>
    <div id="qrcode_bottom" style="text-align: center; width:100%; margin-top:15px;">扫描上方二维码进行授权</div>
</div>
<script type="text/javascript">

    $("#qrcode").attr("href","https://www.baidu.com");
    var note = "我是被你复制的内容！\r\n";
    console.log("regCode:");
            $('#share_block').show();
                socialShare('#share', {url: location.href, sites: ['qzone', 'qq', 'weibo']});
                $('#bt_copy').show();


    var clipboard = new ClipboardJS('.copy', {
        text: function() {
            $('#copy_contents_prefix').text(note);
            $('#copy_contents').text(location.href);
            $('#pop_note').show();
            return note + location.href;
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

    //document.domain = "bibi321.com";
    //document.cookie="regCode=" + regCode + ";domain=bibi321.com;path=/";
    new QRCode(document.getElementById("qrcode"), {
        width: 200,
        height: 200,
        text: "http://m.bibi321.com?parentRegCode=",//url不能写死,
        img_src: "/theme/default/images/weibo.png",
        // img_src: "https://develop.jinzhuzhu.com.cn/Uploads/Picture/9134720170718144549.png",
        // img_src: "user.jpg",
        img_width: 60,
        // use_canvas: false // (是否使用canvas绘制，默认true)
        // 使用img_src，需要保证图片是支持跨域访问的，不然我也无能为力
    });

    $("#btn_close").click(function(){
        $('#pop_note').hide();
    })
</script>
</body>
</html>